<template>
  <div class="map-wrapper">
    <div id="map"></div>
    <div class="actions"></div>
  </div>
</template>

<script>
import axios from 'axios'
import Map from 'ol/Map'
import View from 'ol/View'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Fill, Stroke, Circle, Style, Text, Icon } from 'ol/style'
import { Polygon } from 'ol/geom'
import { GeoJSON } from 'ol/format'
import { defaults } from 'ol/control'
import Feature from 'ol/Feature'
import wddBGridStat from '../apiData/wddBGridStat'
export default {
  components: {},
  props: {},
  data() {
    return {
      map: null,
      gridLayer: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initMap()
    this.createMap()
    this.addGridLayer()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [],
        view: new View({
          projection: 'EPSG:4326',
          center: [116.502429, 30.530761],
          zoom: 9 // 默认缩放级别
        }),
        // 设置地图控件，默认的三个控件都不显示
        controls: defaults({
          attribution: false,
          rotate: false,
          zoom: false
        })
      })
    },
    async createMap() {
      const res = await axios.get('/aq-geojson/340800_full.json')
      const data = res.data
      const layer = new VectorLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(data, {
            featureProjection: 'EPSG:4326'
          })
        }),
        style: function (feature) {
          const name =
            feature.get('name') ||
            feature.get('NAME') ||
            feature.get('名称') ||
            ''
          return new Style({
            fill: new Fill({
              color: 'rgba(64, 158, 255, 0.8)'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 2
            }),
            text: new Text({
              text: name,
              font: '12px sans-serif',
              fill: new Fill({
                color: '#fff'
              }),
              stroke: new Stroke({
                color: '#000',
                width: 3
              })
            })
          })
        }
      })
      this.map.addLayer(layer)
    },
    addGridLayer() {
      const res = wddBGridStat()
      console.log('res', res)
      this.handleDataGrid(res.jc.grid)
    },
    //网格数据渲染
    handleDataGrid(reslist) {
      const this_ = this
      //i是行  j是列
      let count_i = 0,
        count_j = 0,
        grid_len = 0.1,
        grid_x = 31.33,
        grid_y = 115.7,
        start_i = 0,
        start_j = 0
      if (reslist instanceof Array) {
        count_i = reslist.length
        if (reslist[0] instanceof Array) {
          count_j = reslist[0].length
        }
      }
      if (count_i == 0 || count_j == 0) {
        return
      } else if (count_i == 7 && count_j == 8) {
        //gfs 9×11
        grid_len = 0.25
        grid_x = 30.5
        grid_y = 114.3
        start_i = 0
      } else if (count_i == 16 && count_j == 16) {
        //EC 21×28  融合21×26
        grid_len = 0.1
        grid_x = 31.3
        grid_y = 115.7
      }
      let rectFeatures = []
      for (let i = start_i; i < count_i; i++) {
        for (let j = start_j; j < count_j; j++) {
          let textnum = '0'
          if (reslist[i] && reslist[i][j] && typeof reslist[i][j] == 'number') {
            textnum = reslist[i][j] + ''
          }
          let rectfea = new Feature({
            geometry: new Polygon([
              [
                [grid_y + j * grid_len, grid_x - i * grid_len],
                [grid_y + (j + 1) * grid_len, grid_x - i * grid_len],
                [grid_y + (j + 1) * grid_len, grid_x - (i + 1) * grid_len],
                [grid_y + j * grid_len, grid_x - (i + 1) * grid_len]
              ]
            ])
          })
          rectfea.setProperties({ textnum: textnum, level: 'grid' })
          rectFeatures.push(rectfea)
        }
      }
      var source = new VectorSource({
        features: rectFeatures
      })
      this.updataGridSource(source)
    },
    updataGridSource(source) {
      if (this.gridLayer) {
        this.gridLayer.setSource(source)
      } else {
        this.gridLayer = new VectorLayer({
          map: this.map, // 指定地图对象
          source: source,
          style: (feature, resolution) => {
            let fonttext =
              resolution > 0.0011
                ? 'normal 8px sans-serif'
                : 'bold 17px sans-serif'
            return new Style({
              stroke: new Stroke({
                color: '#F7D7C8',
                width: 1,
                lineDash: [10, 10]
              }),
              text: new Text({
                text: feature.get('textnum'),
                font: fonttext,
                fill: new Fill({
                  color: '#F7D7C8'
                }),
                stroke: new Stroke({
                  color: '#BA6842',
                  width: 3
                })
              })
            })
          }
        })
      }
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.map-wrapper {
  height: 100%;
  position: relative;
  #map {
    height: 100%;
    width: 100%;
    background: url(./images/map-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
